<template>
    <div>
        <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="auto">
            <div class="formContainer">
                <el-form-item label="流程类型" prop="TypeCode">
                    <el-select v-model="form.TypeCode" @change="handleChange">
                        <el-option v-for="item in selectItems" :key="item.Id" :label="item.TypeName" :value="item.TypeCode"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item prop="Customer">
                    <el-button @click="submitForm(ruleFormRef)">确定</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue';
    import { FormInstance, FormRules, ElMessage } from 'element-plus';
    import wf_approvalflowapi from '../../api/wf_approvalflowapi';
    import delayInfoApi from '../../api/delayInfoApi';

    const {id} = defineProps(["id"])
    const emit = defineEmits(["onSave"]);

    // 获取表单组件实例
    const ruleFormRef = ref<FormInstance>();
    const selectItems = ref<Array<any>>();

    // 类型描述
    const typeDesc = ref<string>();

    // 模型接口
    interface Form {
        TypeCode: number | null,
    }

    // 模型实例
    const form = ref<Form>({
        TypeCode: null
    })

    // 校验规则
    const rules = reactive<FormRules<Form>>({
        TypeCode: [
            { required: true, message: '请选择流程类型', trigger: 'blur' },
        ],
    })

    // 获取数据
    wf_approvalflowapi.getAll().then((res: any) => {
        selectItems.value = res.data;
    });

    const handleChange = (typeCode:number)=>{
        let item = selectItems.value?.find(o=>o.TypeCode==typeCode);

        console.log(typeDesc.value = item.TypeDesc);
        
    }


      // 表单提交
      const submitForm = async (formEl: FormInstance | undefined) => {
        // 获取组件
        if (!formEl) return

        // 表单验证事件
        await formEl.validate((valid, fields) => {

            // 判断验证是否通过
            if (valid) {
                // 验证通过
                delayInfoApi.send(form.value.TypeCode!,id).then((res:any)=>{
                    if(res.code==1){
                        ElMessage.success({
                            message:"提审成功"
                        });
                    }else{
                        ElMessage.error({
                            message:res.msg
                        });
                    }
                    emit("onSave");
                });
                
            } else {
                // 验证失败
            }
        })
    }

</script>

<style scoped></style>